<template>
	<view class="petname">
		<uni-nav-bar left-icon="back" title="修改昵称" fixed="true" @clickLeft="clickBack" style="margin-top: 20px;"></uni-nav-bar>
		<view class="bg">
			<view style="height: 45px;"></view>
			<view class="tips-top">
				<image class="tips-top-image" src="../../../../static/img/jinggao.png" />
				<view class="tips-top-span">用户你好,柚坛社区允许用户半年修改一次昵称,请谨慎提交!</view>
			</view>
			<view class="input">
				<input v-model="petName" />
			</view>
			<view class="tips-bottom">
				4-30个字符,&nbsp支持中英文、数字
			</view>
			<button :style="buttonColor == 0 ? 'backgroundColor:rgb(254,100,64,0.5)' : ''" @click="clickButton">
				确定
			</button>
		</view>
	</view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
import utils from '../../../../utils/util.js'
export default{
	name: 'PetName',
	components: {
		uniNavBar
	},
	data() {
		return {
			petName: '',
			petName2: '',
			buttonColor: 0,
			opportunity: true
		}
	},
	onShow() {
		let tokenList = utils.getStorageData("token");
		this.$store.commit('setToken',tokenList.username);
		this.userId = this.$store.state.userId;
		this.users = utils.getStorageData(this.userId+'userInfo');
		console.log(this.users);
		this.petName = this.users.petName;
	},
	watch: {
		'petName': {
			handler(newName, oldName) {
				if(newName !== this.users.petName)
				{
					this.buttonColor = 1;
				}else{
					this.buttonColor = 0;
				}
				
			},
			deep: true
		}
	},
	methods: {
		clickBack() {
			uni.navigateBack({
			    delta: 1
			});
		},
		clickButton() {
			if(this.buttonColor == 1)
			{
				if(this.opportunity == true)
				{
					if(this.petName.length>= 4 && this.petName.length<= 30)
					{
								this.users.petName = this.petName;
								uni.showLoading({
									title: '正在修改',
									success: (res) => {
									}
								})
								const userID = this.userId;
								uni.removeStorage({
								    key: userID+'userInfo',
								    success: function (res) {
								        console.log('success');
								    }
								});
								utils.setStorageData(userID+'userInfo',this.users);
								setTimeout(() => {
									wx.hideLoading();
								},500)
					}else{
						uni.showToast({
							title: '该昵称长度不正确',
							duration: 2000,
							image: '/static/img/cuowu1.png'
						})
					}
				}
				else{
					uni.showToast({
						title: '修改昵称次数已用完,无法修改',
						duration: 2000,
						image: '/static/img/cuowu1.png'
					})
				}
			}
		}
	}
}
</script>

<style>
	.bg{
		background-color: #EFEFEF;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
		.tips-top{
			height: 100px;
			display: flex;
			align-items: center;
			position: relative;
		}
			.tips-top-image{
				height: 20px;
				width: 25px;
				position: absolute;
				margin-top: -25px;
				left: 10px;
			}
			.tips-top-span{
				font-size: 15.5px;
				margin-left: 10px;
				margin-right: 10px;
				letter-spacing: 1px;
				text-indent: 30px;
				color: rgb(0,0,0,0.7);
			}
		.input{
			background-color: #fff;
			height: 40px;
			display: flex;
			align-items: center;
		}
			input{
				margin-left: 10px;
				letter-spacing: 1px;
				flex: 1;
			}
		.tips-bottom{
			height: 55px;
			display: flex;
			align-items: center;
			font-size: 15.5px;
			letter-spacing: 1px;
			color: rgb(0,0,0,0.7);
			margin-left: 10px;
		}
		button{
			border-radius: 30px;
			color: #fff;
			background-color: #FE6440;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15.5px;
			letter-spacing: 1px;
		}
</style>
